<template>
  <el-drawer
    size="100%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :with-header="false"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-tabs v-model="activeName" style="margin-left: 10px; min-width: 1440px">
      <el-tab-pane label="表单信息" name="formMsg" class="formClass">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item
            label="申请标题"
            label-align="right"
            width="70%"
            label-width="150px"
          >
            {{ flowApprovalModel.ApplyTitle }}
          </el-descriptions-item>
          <el-descriptions-item
            label="加急指数"
            label-width="150px"
            label-align="right"
            align="center"
          >
            <el-rate
              v-model="flowApprovalModel.UrgentIndex"
              disabled
              style="height: 10px"
            />
          </el-descriptions-item>
          <el-descriptions-item label="申请备注" label-align="right">
            {{ flowApprovalModel.Remark }}
          </el-descriptions-item>
        </el-descriptions>
        <div style="border: 1px solid #e5e3e3; margin-top: 10px">
          <v-form-render
            :disabled="true"
            :form-json="flowApprovalModel.FormJson"
            :form-data="flowApprovalModel.FormData"
            ref="vfDesigner"
            :key="updateKey"
          >
          </v-form-render>
        </div>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="flowMsg" class="flowClass">
        <dawnFlow
          :NodeBar="true"
          :ToolBar="true"
          :isPreview="true"
          ref="uploadFileRef"
          style="width: 100%; min-height: 800px; overflow: auto"
        />
        <div class="opt-style-text1" style="top: 50px">
          <div style="margin-top: 2px; cursor: pointer">
            <div class="nodeTagStyle inExamineBackColor"></div>
            待审核
            <div class="nodeTagStyle agreeBackColor"></div>
            已通过
            <div class="nodeTagStyle disagreeBackColor"></div>
            不同意
            <div class="nodeTagStyle rejectBackColor"></div>
            驳回
          </div>
          <div style="margin-left: 10px">
            <el-button type="primary" link @click="downloadClick"
              ><el-icon size="18"><Picture /></el-icon>导出图片</el-button
            >
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="authLog">
        <el-timeline style="max-width: 600px; text-align: left">
          <el-timeline-item
            :timestamp="item.CreateTime"
            placement="top"
            :key="item.FlowApplyRecordId"
            v-for="item in authLogList"
          >
            <template #dot>
              <el-icon
                v-if="item.NodeExamineState === FlowNodeStateEnum.InExamine"
                size="22"
                style="color: #409eff"
                ><SuccessFilled
              /></el-icon>
              <el-icon
                v-if="item.NodeExamineState === FlowNodeStateEnum.AuditPass"
                size="22"
                style="color: #67c23a"
                ><SuccessFilled
              /></el-icon>
              <el-icon
                v-if="item.NodeExamineState === FlowNodeStateEnum.AuditRefuse"
                size="22"
                style="color: red"
                ><CircleCloseFilled
              /></el-icon>
              <el-icon
                v-if="item.NodeExamineState === FlowNodeStateEnum.AuditDismissal"
                size="22"
                style="color: #ffb800"
                ><RefreshLeft
              /></el-icon>
              <el-icon
                v-if="item.NodeExamineState === FlowNodeStateEnum.Filing"
                size="22"
                style="color: #67c23a"
                ><MessageBox
              /></el-icon>
            </template>
            <el-card>
              <h3>节点名称：{{ item.NodeName }}</h3>
              <h3>审核状态： {{ item.NodeExamineStateName }}</h3>
              <h3>审核人员：{{ item.NodeReviewerName }}</h3>
              <p>审核备注：{{ item.ExamineRemark }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button
        icon="Check"
        color="#16b777"
        plain
        size="large"
        @click="approvalClick(FlowNodeStateEnum.AuditPass)"
        >同意</el-button
      >
      <el-button
        icon="CircleClose"
        color="red"
        plain
        size="large"
        @click="approvalClick(FlowNodeStateEnum.AuditRefuse)"
        >不同意</el-button
      >
      <el-button
        icon="RefreshLeft"
        color="#ffb800"
        plain
        size="large"
        @click="approvalClick(FlowNodeStateEnum.AuditDismissal)"
        >驳回</el-button
      >
      <el-button
        v-if="activeName === 'formMsg'"
        icon="PictureFilled"
        color="#2857E4"
        size="large"
        type="danger"
        plain
        @click="downloadFormImageClick"
        >下载表单图片</el-button
      >
      <el-button
        v-if="activeName === 'flowMsg'"
        icon="PictureFilled"
        color="#2857E4"
        size="large"
        type="danger"
        plain
        @click="downloadFlowImageClick"
        >下载流程图片</el-button
      >
      <el-button icon="Close" size="large" type="danger" plain @click="handleClose"
        >取消</el-button
      >
    </template>
  </el-drawer>

  <auditContent
    :is-visibles="auditContentDrawer.isVisibles"
    :dialogTitle="auditContentDrawer.dialogTitle"
    :flowApplyId="auditContentDrawer.flowApplyId"
    :examineNodeId="auditContentDrawer.examineNodeId"
    :approvalType="auditContentDrawer.approvalType"
    @closeBnt="colosClick"
    @approvalBnt="approvalBnt()"
  >
  </auditContent>
</template>

<script lang="ts" setup>
import { GetExamineNodeData, GetFlowApplyByApplyId } from "@/api/flowApply";
import { FlowNodeStateEnum } from "@/enum/flowEnum";
import { computed, nextTick, reactive, ref } from "vue";
import auditContent from "@/views/flowApproval/waitApproval/auditContent.vue";
import { downloadImageClick } from "@/api/publicTool";

const props = defineProps({
  isVisibles: { type: Boolean, required: true },
  dialogTitle: { type: String, required: true },
  flowApplyId: { type: String, required: true },
  currentNodeId: { type: String, required: true },
});
const emit = defineEmits(["closeBnt", "saveNodeClick"]);

const activeName = ref("formMsg");
const updateKey = ref(0);
//流程ref
const uploadFileRef = ref();
//表单ref
const vfDesigner = ref();
const authLogList = ref<any>([]);
//流程申请数据
const flowApprovalModel = reactive({
  FormData: "",
  FormJson: "",
  ApplyTitle: "",
  UrgentIndex: 1,
  Remark: "",
});

//审核内容界面控制
const auditContentDrawer = reactive({
  isVisibles: false,
  dialogTitle: "",
  examineNodeId: "",
  flowApplyId: "",
  approvalType: FlowNodeStateEnum.AuditPass,
});
//打开时加载
const handleDialogOpen = function () {
  activeName.value = "formMsg";
  updateKey.value = 0;
  authLogList.value = [];
  flowApprovalModel.FormJson = "";
  flowApprovalModel.FormData = "";
  flowApprovalModel.ApplyTitle = "";
  flowApprovalModel.Remark = "";
  flowApprovalModel.UrgentIndex = 1;
  uploadFileRef.value.delFlowClick();
  GetFlowApplyByApplyIdMsg();
  GetExamineNodeDataMsg();
};

//根据申请id获取数据
const GetFlowApplyByApplyIdMsg = function () {
  GetFlowApplyByApplyId({ flowApplyId: props.flowApplyId }).then(({ data, code }) => {
    if (code == 200) {
      nextTick(() => {
        flowApprovalModel.FormJson = JSON.parse(data.FormJson);
        flowApprovalModel.FormData = JSON.parse(data.FormData);
        flowApprovalModel.ApplyTitle = data.ApplyTitle;
        flowApprovalModel.Remark = data.Remark;
        flowApprovalModel.UrgentIndex = data.UrgentIndex;
        uploadFileRef.value.setFlowJson(data.FlowContent);
        updateKey.value++;
      });
    }
  });
};

//审批事件
const approvalClick = function (type: FlowNodeStateEnum) {
  auditContentDrawer.isVisibles = true;
  auditContentDrawer.examineNodeId = props.currentNodeId;
  auditContentDrawer.flowApplyId = props.flowApplyId;
  auditContentDrawer.approvalType = type;
  if (type === FlowNodeStateEnum.AuditPass) auditContentDrawer.dialogTitle = "同意";
  if (type === FlowNodeStateEnum.AuditRefuse) auditContentDrawer.dialogTitle = "拒绝";
  if (type === FlowNodeStateEnum.AuditDismissal) auditContentDrawer.dialogTitle = "驳回";
  if (type === FlowNodeStateEnum.Filing) auditContentDrawer.dialogTitle = "归档";
};

//获取已审核节点数据
const GetExamineNodeDataMsg = function () {
  GetExamineNodeData({ flowApplyId: props.flowApplyId }).then(({ data, code }) => {
    if (code == 200) {
      authLogList.value = data;
    }
  });
};

//导出图片
const downloadClick = function () {
  uploadFileRef.value.downloadImageClick();
};

//是否显示dialog
const dialogVisibled = computed(() => {
  return props.isVisibles;
});
//关闭事件
const handleClose = () => {
  emit("closeBnt");
};

//审批确认回调
const approvalBnt = () => {
  auditContentDrawer.isVisibles = false;
  handleClose();
};

//关闭弹出层
const colosClick = function () {
  auditContentDrawer.isVisibles = false;
};

//下载表单图片
const downloadFormImageClick = async () => {
  downloadImageClick("formClass", `申请[${flowApprovalModel.ApplyTitle}]的表单图`);
};
//下载流程图片
const downloadFlowImageClick = async () => {
  downloadImageClick("flowClass", `申请[${flowApprovalModel.ApplyTitle}]的流程图`);
};
</script>

<style scoped>
.dialog-header-center {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
</style>
